.merak-table {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  // min-height: 200px;
  // padding: 10px;
  font-family: var(--el-font-family);
  border-radius: var(--el-border-radius-base);
  box-sizing: border-box;
  & > :not(:first-child):not(.el-loading-mask) {
    margin-top: 10px;
  }
  & > .el-loading-mask {
    z-index: 1998;
  }
  // 顶部
  &-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    & > :not(:first-child) {
      margin-left: 10px;
    }
  }
  &-tools {
    display: flex;
    align-items: center;
    flex: auto;
    min-width: 0;
    padding-bottom: 5px;
    & > :not(:first-child) {
      margin-left: 10px;
    }
    .el-pagination {
      & > * {
        margin: 0 !important;
      }
      .el-pager > li {
        margin: 0 2px;
        color: var(--merak-text-color);
        background-color: transparent;
        border: 1px solid var(--merak-border-color);
        border-radius: var(--merak-rounded);
      }
      .btn-prev,
      .btn-next {
        color: var(--merak-text-color);
        background-color: transparent !important;
        border: 1px solid var(--merak-border-color);
        border-radius: var(--merak-rounded);
      }
    }
  }
  &-toolbar {
    display: flex;
    align-items: center;
    margin-right: 1px;

    & > :not(:first-child) {
      position: relative;
      margin-left: 36px;
      &::after {
        content: "";
        position: absolute;
        top: 0px;
        left: -18px;
        width: 1px;
        height: 100%;
        background-color: #646567;
      }
    }
    & > .el-button {
      align-items: flex-end;
      padding: 0;
      height: auto;
      min-width: auto;
      font-size: var(--el-font-size-small);
      color: var(--merak-tool-color);
      &:hover,
      &:focus {
        color: var(--el-color-primary) !important;
      }
      &[data-type] {
        background-color: transparent !important;
      }
      // &[data-type="setting"] {
      //   &:hover {
      //     color: #7b61e5 !important;
      //     background-color: #f1ecff !important;
      //   }
      //   &:focus {
      //     color: #6346db !important;
      //     background-color: #f1ecff !important;
      //   }
      // }
      // &[data-type="export"] {
      //   &:hover {
      //     color: #3a9aff !important;
      //     background-color: #dff7ff !important;
      //   }
      //   &:focus {
      //     color: #217ede !important;
      //     background-color: #dff7ff !important;
      //   }
      // }
    }
  }
  // 设置
  // &-setting {
  //   &--body {
  //     display: flex;
  //     flex-direction: column;
  //     padding-right: 10px;
  //     max-height: 40vh;
  //     overflow-y: auto;
  //   }
  //   &--drag {
  //     display: flex;
  //     align-items: center;
  //     & > :not(:first-child) {
  //       margin-left: 4px;
  //     }
  //     .el-checkbox {
  //       width: 180px;
  //       &__label {
  //         flex: auto;
  //         margin-left: 4px;
  //         padding: 4px 6px;
  //         min-width: 0;
  //         border-radius: var(--el-border-radius-base);
  //         transition: background-color 0.5s;
  //         &:hover {
  //           background-color: var(--el-menu-hover-bg-color);
  //         }
  //       }
  //     }
  //   }
  //   &--fixed {
  //     color: var(--el-color-primary);
  //     transition: color 0.5s;
  //   }
  // }
  &-column-setting {
    position: absolute;
    display: flex;
    flex-direction: column;
    width: calc(100% - 16px);
    padding: var(--merak-padding);
    background-color: var(--merak-follow-header-bg);
    border-radius: var(--merak-rounded);
    box-sizing: border-box;
    box-shadow: var(--merak-shadow);
    // transition: transform 0.6s;
    z-index: 10;
    &--content {
      flex: auto;
      padding-right: 10px;
      min-height: 0;
      overflow-y: auto;
    }
    &--title {
      display: flex;
      align-items: flex-end;
      h3 {
        margin: 0;
        margin-right: 10px;
        color: var(--merak-text-color);
        font-size: 14px;
        font-weight: 400;
      }
      span {
        color: var(--merak-tool-color);
        font-size: 12px;
        &:nth-child(3) {
          margin: 0 6px;
          color: var(--el-color-primary);
        }
      }
    }
    &--card {
      margin-top: var(--merak-padding);
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      font-size: var(--el-font-size-small);
    }
    &--tag {
      display: flex;
      align-items: center;
      color: #fff;
      font-size: 12px;
      background-color: var(--el-color-primary);
      border: 1px solid transparent;
      border-radius: var(--el-border-radius-base);
      overflow: hidden;
      cursor: pointer;
      & > :nth-child(1) {
        position: relative;
        padding: 6px 12px;
        &::before {
          content: "";
          position: absolute;
          top: 0;
          right: 0;
          height: 100%;
          border-left: 1px solid rgba($color: #fff, $alpha: 0.5);
        }
      }
      & > .merak-icon {
        padding: 6px 8px;
      }
    }
    &--disabled {
      color: var(--merak-tool-color);
      background-color: #f6f6f6;
      border-color: var(--el-border-color);
      cursor: no-drop;
    }
    &--hide {
      position: relative;
      color: var(--merak-tool-color);
      background-color: #fff;
      border-color: var(--el-border-color);
      &:hover > div {
        opacity: 1;
      }
    }
    &--btns {
      align-self: flex-end;
      padding-top: 10px;
    }
    &--mask {
      position: absolute;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 100%;
      color: #fff;
      opacity: 0;
      background-color: rgba($color: #303133, $alpha: 0.8);
      transition: opacity 0.3s;
      z-index: 1;
    }
  }
  // 选中
  &-batch {
    display: flex;
    align-items: center;
    font-size: var(--el-font-size-small);
    overflow: hidden;
    &--selection {
      display: flex;
      align-items: center;
      margin-left: 10px;
      & > span {
        color: #828580;
        vertical-align: middle;
        &:nth-child(2) {
          color: var(--el-color-primary);
        }
      }
      .el-button {
        margin-left: 10px;
        padding: 0;
        min-width: auto;
        color: #94979e !important;
        font-size: var(--el-font-size-small);
        text-decoration: underline;
        background-color: transparent !important;
      }
    }
    .el-dropdown .el-button {
      font-size: var(--el-font-size-small);
      &.is-plain {
        background-color: transparent;
      }
      &:hover,
      &:focus {
        color: var(--el-button-text-color);
      }
    }

    // .el-button {
    //   padding: 0;
    //   border: none;
    // }
  }
  // 主体
  &-body {
    position: relative;
    flex: auto;
    margin: 0 -8px -8px;
    padding: 0 8px 8px;
    min-height: 0;
    overflow: hidden;
  }
  // 筛选
  &-column {
    display: flex;
    flex-direction: column;
    padding-top: 3px;
    padding-bottom: 3px;
    & > * {
      width: 100% !important;
      box-sizing: border-box;
    }
    // 合计
    &--summary {
      color: #fff;
      background-color: var(--el-color-primary-light-2);
      &-cell > .vxe-cell {
        justify-content: flex-end !important;
      }
      .vxe-cell {
        width: 100% !important;
        justify-content: center;
      }
    }
  }
  // 多选
  &-selection {
    display: flex;
    flex-direction: column;
    min-width: none;
    & > * {
      margin: 0;
    }
  }
  &-expand {
    color: var(--el-color-primary);
    svg {
      transition: transform 0.5s;
    }
    &--open > svg {
      transform: rotate(90deg);
    }
  }
  // 下拉菜单
  &-dropdown {
    &[data-popper-placement="bottom"] {
      transform: translateY(-5px);
    }
    &[data-popper-placement="bottom-end"] {
      transform: translate(-20px, -5px);
    }
    &[data-popper-placement="left-start"] {
      transform: translateX(10px);
    }
    .el-dropdown-menu {
      padding: 5px;
      &__item {
        font-size: var(--el-font-size-small);
        &.is-disabled {
          color: var(--el-text-color-disabled) !important;
        }
      }
    }
    .el-popper__arrow {
      display: none;
    }
  }
  // 操作列按钮
  &-handler {
    padding: 0;
    &:hover,
    &:focus {
      background-color: var(--merak-follow-header-bg-hover) !important;
    }
  }
  &-handle {
    .el-button {
      padding: 0;
      min-width: auto;
    }
    .el-button + .el-dropdown {
      margin-left: var(--merak-space);
    }
  }
  // 底部
  &-footer {
    .el-pagination {
      .el-pager > li {
        margin: 0 2px;
        color: var(--merak-text-color);
        background-color: transparent;
        border: 1px solid var(--merak-border-color);
        border-radius: var(--merak-rounded);
      }
      .btn-prev,
      .btn-next {
        color: var(--merak-text-color);
        background-color: transparent !important;
        border: 1px solid var(--merak-border-color);
        border-radius: var(--merak-rounded);
      }
    }
  }
  // 分页下拉菜单
  &-pagin {
    .el-select-dropdown__item.is-selected {
      font-weight: 400;
    }
  }
  // 动画
  &-enter-active {
    animation: fade-in-down 0.5s;
  }
  &-leave-active {
    animation: fade-in-down 0.5s reverse;
  }
  &-setting-enter-active {
    animation: fade-in-right 0.5s;
  }
  &-setting-leave-active {
    animation: fade-in-right 0.5s reverse;
  }
  .el-loading-mask {
    backdrop-filter: blur(3px);
  }
}

.vxe-table {
  .vxe-header--column.col--checkbox .vxe-cell,
  .vxe-body--column.col--checkbox .vxe-cell {
    padding: 0 !important;
  }
  .vxe-cell--sort {
    margin-left: var(--merak-space);
    & > * {
      color: var(--merak-text-color);
    }
    .vxe-sort--asc-btn {
      top: 0.2em;
    }
    .vxe-sort--desc-btn {
      bottom: 0;
    }
  }
  .merak-table-editor {
    position: relative;
    cursor: pointer;
    .vxe-cell:not(:has(.vxe-cell--label)) {
      float: left;
      max-width: calc(100% + 1px);
      width: auto !important;
      &::before {
        content: "\e641";
        float: right;
        margin-left: 3px;
        color: var(--el-color-primary);
        font-family: "merak-iconfont";
        font-size: 14px;
        transform: translateY(1px);
        opacity: 0;
        transition: opacity 0.2s;
      }
    }
    .vxe-cell:has(.vxe-cell--label) {
      .vxe-cell--label {
        float: left;
        max-width: calc(100% + 1px);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        &::before {
          content: "\e641";
          float: right;
          margin-left: 3px;
          color: var(--el-color-primary);
          font-family: "merak-iconfont";
          font-size: 14px;
          transform: translateY(1px);
          opacity: 0;
          transition: opacity 0.2s;
        }
      }
    }
  }
  .vxe-body--row.row--hover > .merak-table-editor {
    .vxe-cell::before {
      opacity: 1;
    }
    .vxe-cell--label::before {
      opacity: 1;
    }
  }
}
[class*="vxe-icon-"] {
  font-size: 0.7em;
}

.merak-table-vars {
  --merak-tool-color: #646567;
  --merak-follow-header-bg: #f5f8fa;
  --merak-follow-header-bg-hover: #fff;
}
.dark .merak-table-vars {
  --merak-tool-color: #a3a6ad;
  --merak-follow-header-bg: #1d1d1d;
  --merak-follow-header-bg-hover: #1d1d1d;
}

@keyframes fade-in-down {
  0% {
    opacity: 0;
    transform: translate3d(0, -100%, 0);
  }

  to {
    opacity: 1;
    transform: translateZ(0);
  }
}
@keyframes fade-in-right {
  0% {
    opacity: 0;
    transform: translate3d(100%, 0, 0);
  }

  to {
    opacity: 1;
    transform: translateZ(0);
  }
}
